<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" type="text/css" href="css/mui.css" />
		<link rel="stylesheet" type="text/css" href="css/app.css" />
		<script src="js/jquery-3.0.0.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}
			
			html,
			body {
				width: 100%;
				height: 100%;
			}
			
			body {
				background-color: #F2F2F2;
			}
			
			.header {
				width: 100%;
				height: 44px;
				background-color: rgb(255, 48, 63);
				text-align: center;
				line-height: 44px;
				color: white;
				font-size: 20px;
				margin-bottom: 25px;
			}
			
			.header a {
				color: white;
				position: absolute;
				left: 15px;
			}
			
			.header a span {
				font-size: 30px;
			}
			
			.loginWrap {
				padding: 0 3%;
			}
			
			.loginWrap button {
				width: 100%;
				height: 40px;
				font-size: 18px;
				margin: 0 auto;
				display: block;
				color: white;
				background-color: rgb(255, 48, 63);
			}
			
			.loginWrap>div {
				position: relative;
			}
			
			.loginWrap>div>p {
				position: absolute;
				right: 0;
				top: 10px;
				margin: 0;
				padding: 0;
			}
			
			.codeUl {
				height: 30px;
				list-style: none;
				overflow: hidden;
				position: absolute;
				right: 0px;
				top: 5px;
			}
			
			.codeUl li {
				float: left;
				padding: 5px;
			}
			
			.loginWrap p {
				font-size: 13px;
				color: red;
				
			}
			
			#fankuiText {
				background-color: blue;
				/*padding: 3%;*/
				text-align: center;
				margin-top: 10px;
			}
		</style>
	</head>

	<body>
		<div class="all">
			<div class="header">
				<a href="login.html"><span class="mui-icon mui-icon-undo"></span></a>
				<span>注册</span>
			</div>
			<div class="loginWrap">
				<input class="uNInput" type="text" name="mail" id="mail" value="" placeholder="请输入邮箱" />
				<p id="mailP"></p>

				<input class="uNInput" type="text" name="tele" id="tele" value="" placeholder="请输入11位手机号码" />
				<p id="teleP"></p>

				<input class="pWBtn" type="password" name="pass" id="pass" value="" placeholder="请输入6-18位密码" />
				<p id="passP"></p>

				<input class="pWBtn" type="password" name="pass2" id="pass2" value="" placeholder="请再次输入密码" />
				<p id="pass2P"></p>

				<input type="file" name="headPic" id="headPic" value="" style="border: 1px solid black ;margin: 0;padding: 0;font-size: 13px;" />
				<p>请上传头像</p>
				<div class="yanzheng">
					<input class="pWBtn" type="text" name="code" id="code" value="" placeholder="请输入验证码" />
					<ul class="codeUl">
						<li>1</li>
						<li>1</li>
						<li>1</li>
						<li>1</li>
					</ul>
				</div>
				<p id="codeP"></p>
				<button>提交</button>
			</div>
			<p id="fankuiText"></p>
		</div>
		<script type="text/javascript">
			$(function() {

				var num = [];
				//验证码
				//点击随机生成验证码
				function randNum(min, max) {
					return Math.floor(Math.random() * (max - min + 1)) + min;
				}

				function code() {
					for(var i = 0; i < 4; i++) {
						switch(randNum(0, 2)) {
							case 0:
								num[i] = String.fromCharCode(randNum(48, 57));
								break;
							case 1:
								num[i] = String.fromCharCode(randNum(65, 90));
								break;
							case 2:
								num[i] = String.fromCharCode(randNum(97, 112));
								break;
							default:
								break;
						}
						$(".codeUl li").eq(i).html(num[i]);
						$(".codeUl li").eq(i).css("color", "rgb(" + randNum(0, 255) + "," + randNum(0, 255) + "," + randNum(0, 255) + ")")
					}
					console.log(num.join(""));
				}
				code();
				$(".codeUl").bind("click", function() {
					code();
				})

				//正则表达式
				function checkMobile(str) {
					var re = /^1[34578]\d{9}$/;
					if(re.test(str)) {
						return true;
					} else {
						return false;
					}
				}

				function checkEmail(str) {
					var re = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((\.[a-zA-Z0-9_-]{2,3}){1,2})$/;
					if(re.test(str)) {
						return true;
					} else {
						return false;
					}
				}

				function checkPassword(str) {
					var re = /[0-9a-zA-Z_]{6,18}/;
					if(re.test(str)) {
						return true;
					} else {
						return false;
					}
				}

				//验证邮箱
				$('#mail').bind("blur", function() {
					
					if($(this).val() == '') {
						console.log("1212");
						$('#mailP').html("邮箱不能为空");
					} else if(checkEmail($(this).val())) {
						$('#mailP').html("");
					} else {
						$('#mailP').html("邮箱格式不正确");
					}
				})
				$('#tele').bind("blur", function() {
					if($(this).val() == '') {
						$('#teleP').html("手机号码不能为空");
					} else if(checkMobile($(this).val())) {
						$('#teleP').html("");
					} else {
						$('#teleP').html("手机号码格式不正确");
					}
				})

				//验证密码1
				$('#pass').bind("blur", function() {
					if($(this).val() == '') { //如果第一次密码为空
						$('#passP').html('密码不能为空')
					} else { //第一次密码不为空
						if(checkPassword($("#pass").val())) { //第一次密码符合
							$('#passP').html('');
							if($('#pass2').val() == '') {

							} else {
								if(checkPassword($("#pass2").val())) {
									if($('#pass').val() == $('#pass2').val()) {
										$('#pass2P').html('');
									} else {
										$('#pass2P').html('两次密码不一致');
									}
								} else {
									$('#pass2P').html('密码格式不正确');
								}
							}
						} else { //第一次密码不符合
							$('#passP').html('密码格式不正确');
						}
					}
				})

				//验证密码2
				$('#pass2').bind("blur", function() {
					if($(this).val() == '') {
						$('#pass2P').html('密码不能为空');
					} else {
						if(checkPassword($("#pass2").val())) {
							if($('#pass').val() == '') {

							} else {
								if($('#pass').val() == $('#pass2').val()) {
									$('#pass2P').html('');
								} else {
									$('#pass2P').html('两次密码不一致');
								}
							}
						} else {
							$('#pass2P').html('密码格式不正确');
						}
					}
				})

				//验证验证码
				$('#code').bind("blur", function() {
					if($(this).val() == '') {
						$('#codeP').html("验证码不能为空");
					} else {
						if($(this).val() == num.join("")) {
							$('#codeP').html("");
						} else {
							$('#codeP').html("验证码不正确");
						}
					}
				})

				//点击提交按钮
				$('button').bind('click', function() {
					//console.log($('#headPic')[0].files)//判断是否上传头像
					if($('#mailP').html() == '' && $('#teleP').html() == '' && $('#passP').html() == '' && $('#pass2P').html() == '' && $('#codeP').html() == '' && $('.loginWrap input').val() != '' && $('#headPic')[0].files.length > 0) {
						//console.log("123");
						
						//原生ajax上传信息
						var ajaxObj;
//						if(window.XMLHttpRequest()){
							ajaxObj = new XMLHttpRequest();
//						}else{
//							ajaxObj = new ActiveXObject('microsoft','XMLHTTP');
//						}
						ajaxObj.open('POST', 'register.php', true);
						var formD = new FormData();
						var fileObj = document.getElementById('headPic').files[0];
						formD.append('myFile', fileObj);
						formD.append("mail", $('#mail').val());
						formD.append('tele', $('#tele').val());
						formD.append('pass', $('#pass').val());

						ajaxObj.send(formD);
						ajaxObj.onreadystatechange = function() {
							if(ajaxObj.readyState == 4) {
								if(ajaxObj.status == 200) {
									//console.log(ajaxObj.responseText);
									var obj = JSON.parse(ajaxObj.responseText);
									//console.log(obj.msg);
									if(obj.msg) {
										$('#fankuiText').html('注册成功,3秒后跳转至登录页');
										setTimeout(function() {
											window.location.href = 'login.html';
										}, 3000)
									} else {

										$('#fankuiText').html('邮箱或手机已被注册,请重新注册');
										setTimeout(function() {
											$('#fankuiText').html('');
										}, 3000)
									}
								}
							}
						}
					} else {
						$('#fankuiText').html('您填写的信息不完全');
						setTimeout(function() {
							$('#fankuiText').html('');
						}, 3000)
					}
				})

			})
		</script>
	</body>

</html>